<template>
  <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="日期" prop="created_at">
          <el-date-picker style="width: 100%" v-model="ruleForm.created_at" type="datetime" placeholder="日期"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact_id">
          <el-select style="width: 100%" placeholder="联系人" v-model="ruleForm.contact_id" filterable clearable>
            <el-option v-for="ele in customerOptions" :key="ele.id" :label="ele.name" :value="ele.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="沟通形式" prop="communication">
          <el-select style="width: 100%" placeholder="沟通形式" v-model="ruleForm.communication" filterable clearable>
            <el-option label="电话" value="电话" />
            <el-option label="即时通讯" value="即时通讯" />
            <el-option label="上门拜访" value="上门拜访" />
            <el-option label="面谈" value="面谈" />
            <el-option label="邮件" value="邮件" />
            <el-option label="短信" value="短信" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <el-form-item label="跟进情况" prop="content">
          <el-input type="textarea" :rows="2" placeholder="跟进情况" style="width: 100%" v-model="ruleForm.content" />
        </el-form-item>
        <el-form-item label="遇到问题" prop="question">
          <el-input type="textarea" :rows="2" placeholder="遇到问题" style="width: 100%" v-model="ruleForm.question" />
        </el-form-item>
        <el-form-item label="下步计划" prop="plan">
          <el-input placeholder="下步计划" type="textarea" :rows="2" style="width: 100%" v-model="ruleForm.plan" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">继续跟进</el-radio>
            <el-radio :label="0">无效客户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下次拜访时间" prop="next_time">
          <el-date-picker style="width: 100%" v-model="ruleForm.next_time" type="datetime" placeholder="下次拜访时间"
            value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { followUpAddApi } from "@/plugins/api/customer/manage/followUp";
// 客户api
// import { customerOptionsApi } from "@/plugins/api/shopping/user";
import { optionsApi as customerOptionsApi } from "@/plugins/api/customer/manage/contacts";
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
});
let ruleForm = ref({});
let rules = {
  created_at: [{ required: true, message: "选择日期", trigger: "change" }],
  contact_id: [{ required: true, message: "选择联系人", trigger: "change" }],
  communication: [
    { required: true, message: "选择沟通形式", trigger: "change" },
  ],
  content: [{ required: true, message: "跟进情况", trigger: "blur" }],
  status: [{ required: true, message: "选择状态", trigger: "change" }],
  next_time: [{ required: true, message: "选择下次拜访时间", trigger: "change" }],
};
let dialogVisible = ref(false);
function handleClose(done) {
  // dialogVisible.value = false;
  ElMessageBox.confirm("是否确定关闭此对话框?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
}
let title = ref("");
let ruleFormRef = ref(null);
function initFun(type, row) {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields();
  }
  title.value = "新增";
  ruleForm.value = {};
  ruleForm.value.status = 1;
  dialogVisible.value = true;
  getCustem();
}
const emit = defineEmits(["followList"]);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = { ...ruleForm.value };
      obj.opportunity_id = props.dataInfo.id;
      obj.customer_id = props.dataInfo.customer_id;
      followUpAddApi(obj).then((data) => {
        ElMessage.success("新增成功！");
        dialogVisible.value = false;
        emit("followList");
      });
    }
  });
}
// 客户
let customerOptions = ref([]);
function getCustem() {
  customerOptionsApi({
    customer_id: props.dataInfo.customer_id,
  }).then((data) => {
    customerOptions.value = data;
  });
}
defineExpose({
  initFun,
});
</script>
<style scoped lang="scss"></style>
